<template>
  <div class="main-container">
    <div class="header">
      <h1>数据可视化</h1>

      <div class="show-time"></div>
    </div>
    <div class="mainbox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel">
          <div id="demo2" class="mapitem"></div>
          <!-- <div id="demo2" style="height:299px;"></div> -->
          <!-- 伪元素绘制盒子下边角 -->
          <div class="panel-footer"></div>
        </div>

        <div class="panel">
          <div id="demo4" class="mapitem"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <div id="demo7" class="mapitem"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>12434</li>
              <li>10983</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>患病人数</li>
              <li>新增人数</li>
            </ul>
          </div>
        </div>
        <!-- map模块 -->
        <div class="map">
          <div id="demo1" style="height: 800px"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel">
          <div id="demo3" class="mapitem"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <div id="demo5" class="mapitem"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <div id="demo6" class="mapitem"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data() {
    return {
      //饼图
      demo2Data: [
        { name: "新冠肺炎", value: 1048 },
        { name: "诺如", value: 735 },
        { name: "中毒", value: 580 },
        { name: "流行性感冒", value: 484 },
        { name: "疟疾", value: 300 },
        { name: "其他疾病", value: 100 }
      ],

      pieData: [], //饼图数据
      linedata: [], //折线图数据
      bardata: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 197] //柱状图
    }
  },
  methods: {
    getData() {
      this.getmap2()
    },
    getData1() {
      this.getmap4()
      // this.pieData = Array.from(res.data.data);
      // this.$forceUpdate()
    },

    getData2() {
      this.getmap3()
      // this.pieData = Array.from(res.data.data);
      // this.$forceUpdate()
    },

    getData3() {
      // this.bardata = res.data.data;
      this.getmap3()
    },
    close() {
      this.$router.go(-1) //返回上一层
    },
    change() {
      for (var i = 0; i < this.value.length; i++) {
        var option = this.value[i].split(":")
        if (option.length > 1) {
          this.demo2Data.push({ name: option[0], value: option[1] })
        }
      }
      this.getmap2()
    },

    outlogin() {
      sessionStorage.removeItem("token")
      this.$router.push({ path: "/login" })
    },
    // 渝中地图
    getmap() {
      var myChart = echarts.init(document.getElementById("demo1"))
      // 散点在地图上的坐标
      var geoCoordMap = [
        { name: "解放碑街道办事处", value: [106.580782, 29.5571041, 12] },
        { name: "朝天门街道办事处", value: [113.913983, 22.71942, 13] },
        { name: "七星岗街道办事处", value: [106.56675, 29.553877, 14] },
        { name: "南纪门街道办事处", value: [106.569857, 29.552007, 15] },
        { name: "菜园坝街道办事处", value: [106.530352, 29.537465, 16] },
        { name: "大溪沟街道办事处", value: [106.559941, 29.563019, 17] },
        { name: "两路口街道办事处", value: [106.549389, 29.552102, 18] },
        { name: "上清寺街道办事处", value: [106.548064, 29.559826, 19] },
        { name: "大坪街道办事处", value: [114.165043, 22.608058, 20] },
        { name: "石油路街道办事处", value: [106.510108, 29.535314, 21] },
        { name: "化龙桥街道办事处", value: [106.508758, 29.550972, 22] }
      ]

      var option = {
        // backgroundColor: "rgb(128, 128, 128,0.1)",
        geo: {
          map: "yz",
          zoom: 1.2,
          label: {
            // 鼠标移动显示区域名称
            emphasis: {
              show: true,
              color: "#fff"
            }
          },
          roam: true,
          // 地图样式修改
          itemStyle: {
            normal: {
              areaColor: "rgba(34, 70, 168, 0.7)",
              borderColor: "#0692a4"
            },
            emphasis: {
              areaColor: "rgba(119, 139, 224, 0.548)"
            }
          }
        },
        title: {
          // text: "渝中区新冠确诊详情",
          left: "center",
          textStyle: {
            color: "lightskyblue"
          }
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo", // series坐标系类型
            selectedMode: "single",
            label: {
              normal: {
                show: false, // 这个是关键点， 默认显示 false
                formatter: function (params) {
                  return `${params.data.name}:${params.data.value[2]}粒`
                },
                offset: [0, -20],
                fontStyle: {
                  fontFamily: "Courier New",
                  color: "auto"
                }
              }
            },

            itemStyle: {
              color: "#ddb926",
              //显示颜色
              normal: {
                color: "#9fd7dd",
                borderColor: "#8ac2e5",
                areaStyle: { color: "#9fd7dd" }
              },
              emphasis: {
                label: { show: true }
              }
            },

            effectType: "ripple",
            rippleEffect: {
              period: 4,
              scale: 1.5,
              brushType: "stroke",
              color: "black"
            },
            data: geoCoordMap
          }
        ]
      }
      console.log(JSON)
      echarts.registerMap("yz", JSON)
      // echarts.registerMap("yuzhong", cq.yuzhong);
      myChart.setOption(option)
      // 让图表随屏幕自适应
      window.addEventListener("resize", function () {
        myChart.resize()
      })

      function remove() {
        geoCoordMap.pop()
        myChart.setOption(option)
      }
    },
    //饼图
    getmap2() {
      var myChart = echarts.init(document.getElementById("demo2"))

      var option = {
        // backgroundColor: "rgb(128, 128, 128,0.1)",
        title: {
          text: "各类疾病占比",
          left: "center",
          textStyle: {
            color: "lightskyblue"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: "rgba(255,255,255,0.5)",
            fontSize: 10
          }
        },
        series: [
          {
            name: "各类疾病分布情况",
            type: "pie",
            radius: "50%",
            data: this.pieData, //饼图数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      // 让图表随屏幕自适应
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    //柱状图
    getmap3() {
      var myChart = echarts.init(document.getElementById("demo3"))

      var option = {
        title: {
          text: "各街道确诊详情",
          textStyle: {
            color: "lightskyblue"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          textStyle: {
            color: "rgba(255,255,255,0.5)",
            fontSize: 12
          }
          // data: ["2011年"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "value",
            boundaryGap: [0, 0.01],
            axisTick: {
              alignWithLabel: true
            },
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.8)",
              fontSize: 10
            },
            // x轴样式不显示
            axisLine: {
              show: true
            }
          }
        ],

        //  y轴配置
        yAxis: [
          {
            type: "category",
            data: [
              "解放碑",
              "朝天门",
              "七星岗",
              "南纪门",
              "菜园坝",
              "大溪沟",
              "两路口",
              "上清寺",
              "大坪",
              "石油路",
              "化龙桥",
              "确诊数(例)"
            ],
            // data:this.bardata,
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.6)",
              fontSize: 12
            },
            // y轴样式修改
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.3)"
                // width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.3)"
              }
            }
          }
        ],

        series: [
          {
            name: "新冠确诊数",
            type: "bar",
            stack: "chart",
            // showBackground: true,
            emphasis: {
              color: "rgba(74,136,209)"
            },

            //修改柱状图颜色--记得加透明度
            itemStyle: {
              color: "rgba(74,136,209,1)",
              fontSize: 10
            },

            data: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 197]
            // data: this.bardata
          }
        ]
      }
      myChart.setOption(option)
      // 让图表随屏幕自适应
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    //折线图
    getmap4() {
      var myChart = echarts.init(document.getElementById("demo4"))

      var yearData = [
        {
          year: "2020", // 年份
          data: [
            // 两个数组是因为有两条线
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
        },
        {
          year: "2021", // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
        }
      ]

      var option = {
        // 修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis"
        },
        // 图例组件
        legend: {
          // 当serise 有name值时， legend 不需要写data
          // 修改图例组件文字颜色
          textStyle: {
            color: "#4c9bfd"
          },
          right: "10%"
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          show: true, // 显示边框
          borderColor: "#012f4a" // 边框颜色
        },
        xAxis: {
          type: "category",
          boundaryGap: false, // 去除轴间距
          // data: [
          //   "1月",
          //   "2月",
          //   "3月",
          //   "4月",
          //   "5月",
          //   "6月",
          //   "7月",
          //   "8月",
          //   "9月",
          //   "10月",
          //   "11月",
          //   "12月"
          // ],
          data: this.linedata,
          // 去除刻度线
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfb" // x轴文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          // 去除刻度线
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfb" // x轴文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a"
            }
          }
        },
        series: [
          {
            type: "line",
            smooth: true, // 圆滑的线
            name: "新增病例",
            data: yearData[0].data[0]
          },
          {
            type: "line",
            smooth: true, // 圆滑的线
            name: "新增",
            data: yearData[0].data[1]
          }
        ]
      }

      myChart.setOption(option)

      // 4.让图表随屏幕自适应
      window.addEventListener("resize", function () {
        myChart.resize()
      })

      // 5.点击切换2020 和 2021 的数据
    },
    getmap5() {
      var myChart = echarts.init(document.getElementById("demo5"))

      var option = {
        color: [
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: 10
          }
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: ["10%", "60%"],
            center: ["50%", "40%"],
            // 半径模式  area面积模式
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontsize: 10
            },
            // 引导线调整
            labelLine: {
              // 连接扇形图线长(斜线)
              length: 6,
              // 连接文字线长(横线)
              length2: 8
            },
            data: [
              {
                value: 26,
                name: "北京"
              },
              {
                value: 24,
                name: "山东"
              },
              {
                value: 25,
                name: "河北"
              },
              {
                value: 20,
                name: "江苏"
              },
              {
                value: 25,
                name: "浙江"
              },
              {
                value: 30,
                name: "四川"
              },
              {
                value: 42,
                name: "湖北"
              }
            ]
          }
        ]
      }

      myChart.setOption(option)
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    //柱状图--事件
    getmap6() {
      var myChart = echarts.init(document.getElementById("demo6"))
      var option = {
        color: ["#2f89cf"],
        // 提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 修改图表位置大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        // x轴相关配置
        xAxis: [
          {
            type: "category",
            data: [
              "新冠肺炎",
              "新冠病毒",
              "流行感冒",
              "诺如病毒",
              "水痘",
              "突发中毒事件"
            ],
            axisTick: {
              alignWithLabel: true
            },
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.8)",
              fontSize: 10
            },
            // x轴样式不显示
            axisLine: {
              show: false
            }
          }
        ],
        // y轴相关配置
        yAxis: [
          {
            type: "value",
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.6)",
              fontSize: 12
            },
            // y轴样式修改
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.6)",
                width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            }
          }
        ],
        // 系列列表配置
        series: [
          {
            name: "患病人数",
            type: "bar",
            barWidth: "35%",
            // ajax传动态数据
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    //折线图
    getmap7() {
      var myChart = echarts.init(document.getElementById("demo7"))
      var option = {
        title: {
          text: "",
          subtext: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["最高", "最低"]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2019-02-25",
            "2019-03-04",
            "2019-03-18",
            "2019-03-26",
            "2019-04-16",
            "2019-04-26",
            "2019-05-04"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: [
          {
            name: "最高",
            type: "line",
            data: [11, 11, 15, 13, 12, 13, 10],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "最低",
            type: "line",
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: "周最低", value: 2, xAxis: 1, yAxis: 1.5 }]
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max"
                  },
                  {
                    symbol: "circle",
                    label: {
                      normal: {
                        position: "start",
                        formatter: "最大值"
                      }
                    },
                    type: "max",
                    name: "最高点"
                  }
                ]
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
      // 让图表随屏幕自适应
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    }
  },
  mounted() {
    this.getData()
    this.getData1()
    this.getData2()
    this.getData3()
    this.getmap3()
    this.getmap4()
    this.getmap5()
    this.getmap6()
    this.getmap7()
  }
}
</script>

<style scoped lang="less">
@-webkit-keyframes rotate1 {
  0%{
    transform:  rotate(0deg);
  }
  100%{
    transform:  rotate(360deg);
  }
}
body {
  background-size: 100%;
  line-height: 1.15;
}
li {
  list-style: none;
}
.main-container {
  background-color: midnightblue;
  background-size: 100% 100%;
  line-height: 1.15;
  width: 100%;
  min-width: 1437px;
  .header {
    height: 80px;
    background: url(/static/img/head_bg.png) no-repeat;
    background-size: 100% 100%;
    h1 {
      // color: white;
      color: lightskyblue;
      text-align: center;
      line-height: 80px;
    }
  }
  .mainbox {
    display: flex;
    min-width: 1024px;
    max-height: 1920px;
    margin: 0 auto;
    padding: 10px 10px 0;
    .column {
      flex: 3;
    }
    .column:nth-child(2) {
      flex: 5;
      margin: 0 10px 15px;
      overflow: hidden;
    }

    .panel {
      position: relative;
      height: 300px;
      padding: 0 15px 15px;
      margin-bottom: 15px;
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: url("/static/img/line.png") rgba(255, 255, 255, 0.03);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      .mapitem {
        height: 310px;
      }

      .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
      }

      h2 {
        height: 10px;
        color: #fff;
        line-height: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        a {
          color: rgb(167, 167, 167);
          text-decoration: none;
          margin: 0 2px;
        }
        .a-active {
          color: #fff;
        }
      }

      .chart {
        height: 3rem;
      }
    }

    .no {
      // border: 1px solid red;
      background-color: rgba(101, 132, 226, 0.1);
      padding: 10px;

      .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 10px;
          border-top: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
          content: "";
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 30px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
          content: "";
        }

        ul {
          display: flex;

          li {
            position: relative;
            flex: 1;
            line-height: 50px;
            font-size: 50px;
            color: #ffeb7b;
            text-align: center;
            font-family: electronicFont;

            &:first-child::after {
              content: "";
              position: absolute;
              top: 25%;
              right: 0;
              height: 50%;
              width: 1px;
              background-color: rgba(255, 255, 255, 0.3);
              // border:1px solid red
            }
          }
        }
      }

      .no-bd {
        ul {
          display: flex;

          li {
            // border: 1px solid red;
            flex: 1;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            height: 20px;
            line-height: 20px;
            padding-top: 10px;
          }
        }
      }
    }

    .map {
      width: 100%;
      position: relative;
      background-image: url(/static/img/lbx.png);
      background-repeat: no-repeat;

      #demo1 {
        animation: rotate1 15s linear infinite;
        background-image: url(/static/img/map.png);
        background-repeat: no-repeat;
        background-position: 70px 70px;
      }
      .chart {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
